<template>
  <div class="">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="YkDialogVisible"
      width="300px"
      @close="YkMsgDialogClose"
      :close-on-click-modal="false"
      center
    >
      <el-form :model="Ykform" size="mini" ref="YkMsgForm">
        <el-form-item label="目标" label-width="70px" prop="name">
          <el-input
            style="width: 100%"
            v-model="Ykform.name"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="遥控值" label-width="70px" prop="crtl_value">
          <el-select
            style="width: 100%"
            v-model="Ykform.ctrl_value"
            placeholder="请选择活动区域"
            :disabled="OptionSelect"
          >
            <el-option
              v-for="item in selectOptions"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
            <!-- <el-option label="分闸" :value="0"></el-option>
            <el-option label="合闸" :value="1"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="超时(秒)" label-width="70px" prop="crtl_timeout">
          <el-input
            type="number"
            style="width: 100%"
            v-model="Ykform.ctrl_timeout"
          ></el-input>
        </el-form-item>
        <el-form-item label="控制密码" label-width="70px" prop="ctrl_pwd">
          <el-input
            show-password
            style="width: 100%"
            v-model="Ykform.ctrl_pwd"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          :disabled="!buttonDisabled"
          round
          :type="buttonDisabled ? 'primary' : 'info'"
          @click="doYK(1)"
          >预置</el-button
        >
        <el-button
          size="mini"
          :disabled="buttonDisabled"
          round
          :type="buttonDisabled ? 'info' : 'success'"
          @click="doYK(2)"
          >执行</el-button
        >
        <el-button
          size="mini"
          :disabled="buttonDisabled"
          round
          :type="buttonDisabled ? 'info' : 'success'"
          @click="doYK(3)"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  setMessageCallback,
  removeMessageCallback,
  getGuid32,
  publishMsg,
  checkSpecialId,
} from "@/mqtt";
import "@/utils/dialog";

export default {
  name: "YKdialog",
  data() {
    return {
      YkDialogVisible: false, //遥控弹窗
      Ykform: {
        name: "",
        ctrl_value: 0,
        ctrl_timeout: 10,
        ctrl_pwd: "",
      },
      YkMsgFrom: {
        id: "",
        gw_sn: "",
        ctrl_id: "",
        ctrl_uuid: "",
        ctrl_type: 0,
      },
      buttonDisabled: true,
      mySpecialId: "",
      OptionSelect: false,
      dialogTitle: "", //弹窗标题
      selectOptions: [], // 下拉框内容
    };
  },
  created() {},
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  mounted() {
    setMessageCallback(this.onMessage);
  },

  methods: {
    onMessage(topic, msg) {
      //console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1012:
          if (msg.funCode == 2) {
            if (msg.retCode != 0) {
              return this.$message.error(msg.retMsg);
            } else {
              this.uuid = this.YkMsgFrom.ctrl_uuid;
              //console.log(this.uuid);
              if (this.uuid == msg.data.ctrl_uuid && msg.data.ctrl_step === 1) {
                this.$message.success("预置操作已执行!");
                this.buttonDisabled = false;
              } else if (msg.data.ctrl_step === 2) {
                this.$message.success("执行操作已执行!");
                this.buttonDisabled = true;
              } else if (msg.data.ctrl_step === 3) {
                this.$message.success("取消操作已执行!");
                this.buttonDisabled = true;
              }
            }
          }
          break;
        default:
          break;
      }
    },

    Ykdialog(val) {
      // console.log(val);
      if (val.hasOwnProperty("ctrl_value")) {
        this.OptionSelect = true;
        this.Ykform.ctrl_value = val.ctrl_value;
      } else {
        this.OptionSelect = false;
      }
      this.YkDialogVisible = true;
      (this.dialogTitle = val.dialogTitle || "遥控"),
        (this.selectOptions = val.selectOptions || [
          { label: "分闸", value: 0 },
          { label: "合闸", value: 1 },
        ]);
      this.Ykform.name = val.name;
      this.YkMsgFrom.id = val.id;
      this.YkMsgFrom.gw_sn = val.gw_sn;
      this.YkMsgFrom.ctrl_id = val.id;
      this.YkMsgFrom.ctrl_uuid = getGuid32();
    },

    doYK(val) {
      let newMsg = {
        webMsgType: 1012,
        funCode: 2,
      };
      let obj = {};
      this.$set(obj, "ctrl_step", val);
      this.$set(obj, "ctrl_value", this.Ykform.ctrl_value);
      this.$set(obj, "ctrl_timeout", parseInt(this.Ykform.ctrl_timeout));
      this.$set(obj, "ctrl_pwd", this.Ykform.ctrl_pwd);
      // let obj = {ctrl_step:val,ctrl_value:this.Ykform.ctrl_value,ctrl_timeout:this.Ykform.ctrl_timeout}
      newMsg.data = { ...obj, ...this.YkMsgFrom };
      publishMsg(newMsg);
    },

    YkMsgDialogClose() {
      this.$refs.YkMsgForm.resetFields();
      this.buttonDisabled = true;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
